<template>
    <footer class="footer">
        <ul>
          <router-link tag="li" to="shouye">
            <img src="@/img/11.png">
            <span>首页</span>
          </router-link>
          <router-link tag="li" to="shop">
            <img src="@/img/12.png">
            <span>商城</span>
          </router-link>
          <router-link tag="li" to="pinwei">
            <img src="@/img/13.png">
            <span>品味</span>
          </router-link>
          <router-link tag="li" to="MySelf">
            <img src="@/img/14.png">
            <span>我的</span>
         </router-link>
        </ul>
           
    </footer>
</template>

<script>
export default{
    data() {
        return {

        }
    },
    components: {

    }
}
</script>

<style scoped lang="less">
    footer{
        height:50px;
        position:fixed;
        bottom:0;
        left:0;
        width:100%;
        background:#fff;
        border-top:1px solid #fff;
        ul{
            width:100%;
            height:45px;

            display:flex;
            li{
                flex:1;
                display:flex;
                flex-direction:column;
                justify-content:center;
                align-items:center;
                &.router-link-active{
                    background:#ff4c4c;
                }
                img{
                    height:30px;
                    width:20%;
                }
                span{
                    paddding-top:0.1rem
                }
            }
        }
    }
</style>
